<template>
  <div class="box">
    <div class="topBar">
      <div class="topBox">
        <div>
          <span class="khTitle">客户信息</span>
          <span class="khInput" @click="khFn">{{
            customerInfo.customerNM
          }}</span>
        </div>
        <div class="zj">
          <span class="zjTitle">债券信息</span>
          <span class="zjInput" @click="zjFn">{{ bondInfo.bondFname }}</span>
        </div>
        <div class="searchBtn">
          <el-button type="primary" class="btn" @click="clearSearchBtn"
            >重置</el-button
          >
        </div>
      </div>
    </div>
    <div class="right">
      <!-- 客户信息 -->
      <div class="customersCard">
        <div class="customersCardTitle">客户信息</div>
        <div class="info">
          <div class="infoItem">
            <div style="margin-bottom: 20px">
              <span class="infoItemLabel">客户全称</span
              ><span class="infoItemVal">{{ customerInfo.customerNM }}</span>
            </div>
            <div style="margin-bottom: 20px">
              <span class="infoItemLabel">客户编码</span
              ><span class="infoItemVal">{{ customerInfo.customerID }}</span>
            </div>
            <div>
              <span class="infoItemLabel">公司地址</span
              ><span class="infoItemVal">{{ customerInfo.comAddress }}</span>
            </div>
          </div>
          <div class="infoItem">
            <!-- <div style="margin-bottom: 20px">
              <span class="infoItemLabel">信用评级</span
              ><span class="infoItemVal">{{ customerInfo.custRating }}</span>
            </div> -->
            <div style="margin-bottom: 20px">
              <span class="infoItemLabel">累计销售规模</span
              ><span class="infoItemVal">{{
                customerInfo.cumlativeAmount | filterNum
              }}</span>
            </div>
            <div>
              <span class="infoItemLabel">累计销售只数</span
              ><span class="infoItemVal">{{ customerInfo.cumlativeSize }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 债券信息 -->
      <div class="bondCard">
        <div class="bondCardTitle">债券信息</div>
        <div class="info">
          <div style="margin-right: 100px">
            <div style="margin-bottom: 20px">
              <span class="infoItemLabel">债券全称</span
              ><span class="infoItemVal">{{ bondInfo.bondFname }}</span>
            </div>
            <div style="display: flex">
              <div style="width: 500px; margin-bottom: 20px">
                <span class="infoItemLabel">债券编码</span
                ><span class="infoItemVal">{{ bondInfo.bondId }}</span>
              </div>
              <div style="flex: 1">
                <!-- <span class="infoItemLabel">发行规模</span
                ><span class="infoItemVal"
                  >{{ bondInfo.issueAmount * 10000 }}万元</span
                > -->
                <span class="infoItemLabel">发行规模</span
                ><span class="infoItemVal"
                  >{{ (bondInfo.issueAmount * 10000) | filterNum }}元</span
                >
              </div>
            </div>
            <div style="display: flex">
              <div style="width: 500px">
                <span class="infoItemLabel">债券简称</span
                ><span class="infoItemVal">{{ bondInfo.bondSname }}</span>
              </div>
              <div style="flex: 1">
                <span class="infoItemLabel">债券类型</span
                ><span class="infoItemVal">{{ bondInfo.bondType }}</span>
              </div>
            </div>
          </div>
          <div class="infoItem">
            <div style="margin-bottom: 20px">
              <span class="infoItemLabel">发行日</span
              ><span class="infoItemVal">{{ bondInfo.issueDate }}</span>
            </div>
            <div style="margin-bottom: 20px">
              <span class="infoItemLabel">起息日</span
              ><span class="infoItemVal">{{ bondInfo.effDate }}</span>
            </div>
            <div>
              <span class="infoItemLabel">兑付日</span
              ><span class="infoItemVal">{{ bondInfo.maturityDate }}</span>
            </div>
          </div>
          <div class="infoItem">
            <div style="margin-bottom: 20px">
              <span class="infoItemLabel">期限（天）</span
              ><span class="infoItemVal">{{ bondInfo.termDays }}</span>
            </div>
            <div style="margin-bottom: 20px">
              <span class="infoItemLabel">发行价</span
              ><span class="infoItemVal">{{ bondInfo.issuerPrice }}元</span>
            </div>
            <div>
              <span class="infoItemLabel">发行利率(%)</span
              ><span class="infoItemVal">{{ bondInfo.issueCouponRate }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 风险偏好明细 -->
      <div class="riskAppetite">
        <!-- 图表 -->
        <div class="riskAppetiteCharts">
          <div id="charts" ref="charts"></div>
        </div>
        <div class="riskAppetiteTable">
          <div style="display: flex">
            <el-date-picker
              v-model="riskAppetiteDate"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              value-format="yyyyMMdd"
              style="margin-bottom: 10px"
            >
            </el-date-picker>
            <el-select
              v-model="selectValue"
              placeholder="请选择"
              class="riskAppetiteSelect"
              clearable
            >
              <el-option
                v-for="item in selectList"
                :key="item.value"
                :label="item.value"
                :value="item.label"
              >
              </el-option>
            </el-select>
            <el-button type="primary" class="btn" @click="riskBtn"
              >查询</el-button
            >
          </div>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              label="对照时间段"
              align="center"
              :formatter="dateFn"
            >
            </el-table-column>
            <el-table-column
              prop="matchRate"
              label="券客匹配程度(%)"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="assessMethod"
              label="偏好评估法"
              align="center"
            >
            </el-table-column>
          </el-table>
          <el-pagination
            small
            style="
              text-align: right;
              margin-right: 20px;
              margin-top: 20px;
              margin-bottom: 10px;
            "
            background
            layout="prev, pager, next"
            :total="bottomTotal"
            @current-change="bottomPageFn"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-drawer
      ref="drawer"
      :title="status == 0 ? '请选择客户信息' : '请选择债券信息'"
      size="80%"
      :visible.sync="drawer"
      direction="btt"
      :append-to-body="true"
      :destroy-on-close="true"
      custom-class="drawer-table"
    >
      <div v-if="status == 0">
        <el-form :inline="true" :model="customerForm">
          <el-form-item label="客户名称">
            <el-input v-model="customerForm.customerNM" clearable></el-input>
          </el-form-item>
          <el-form-item label="客户ID">
            <el-input v-model="customerForm.customerId" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="customerSubmit" class="btn"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          ref="singleTable"
          :data="customerData"
          :highlight-current-row="true"
          style="width: 100%"
          @row-click="customerRowClick"
        >
          <el-table-column type="index" label="序号" align="center">
          </el-table-column>
          <el-table-column property="customerID" label="客户ID" align="center">
          </el-table-column>
          <el-table-column
            property="customerNM"
            label="客户名称"
            align="center"
          >
          </el-table-column>
          <el-table-column property="comAddress" label="地址" align="center">
          </el-table-column>
        </el-table>
        <el-pagination
          small
          style="text-align: right; margin-right: 20px; margin-top: 20px"
          background
          layout="prev, pager, next"
          :total="customerTotal"
          @current-change="customerPageFn"
        >
        </el-pagination>
      </div>
      <div v-if="status == 1">
        <el-form :inline="true" :model="bondForm">
          <el-form-item label="债券名称">
            <el-input v-model="bondForm.bondName" clearable></el-input>
          </el-form-item>
          <el-form-item label="债券ID">
            <el-input v-model="bondForm.bondId" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="bondSubmit" class="btn"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          ref="singleTable"
          :data="bondData"
          :highlight-current-row="true"
          style="width: 100%"
          @row-click="bondRowClick"
        >
          <el-table-column type="index" label="序号" align="center">
          </el-table-column>
          <el-table-column property="bondId" label="债券ID" align="center">
          </el-table-column>
          <el-table-column property="bondSname" label="债券简称" align="center">
          </el-table-column>
          <el-table-column property="bondFname" label="债券全称" align="center">
          </el-table-column>
          <el-table-column property="bondType" label="债券类型" align="center">
          </el-table-column>
        </el-table>
        <el-pagination
          small
          style="text-align: right; margin-right: 20px; margin-top: 20px"
          background
          layout="prev, pager, next"
          :total="bondTotal"
          @current-change="bondPageFn"
        >
        </el-pagination>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getCustomer, getBond, getDictItems } from "@/api/common/index.js";
import { getMatchBondCustomer } from "@/api/recommendationSystem/index.js";
export default {
  data() {
    return {
      status: 0,
      drawer: false,
      tabIndex: 0,
      tabLabel: ["客户列表", "债券列表"],
      tableData: [],
      bondData: [],
      customerTotal: 0,
      customerData: [],
      searchInput: "",
      riskAppetiteDate: "",
      customerSearchValue: "",
      bondSearchValue: "",
      bondSearchList: [],
      customerSearchList: [],
      customerInfo: {},
      bondInfo: {},
      count: "",
      selectValue: "",
      selectList: [],
      bondTotal: 0,
      bottomTotal: 0,
      riskAppetiteTotal: 0,
      count: 1,
      customerForm: {
        customerNM: "",
        customerId: "",
        pn: 10,
        page: 1,
      },
      bondForm: {
        bondName: "",
        bondId: "",
        pn: 10,
        page: 1,
      },
    };
  },
  filters: {
    filterNum(value) {
      const str = value ? value.toString() : "";
      if (str) {
        const reg =
          str.indexOf(".") > -1 ? /\B(?=(\d{3})+\.)/g : /\B(?=(\d{3})+$)/g;
        const returnData = str.replace(reg, ",");
        return returnData;
      } else {
        return "";
      }
    },
  },
  mounted() {
    this.init();
    // this.getCustomerFn("")
    // this.getBond("")
    this.$nextTick(() => {
      let chartDom = document.getElementById("charts");
      let myChart = echarts.init(chartDom);
      const option = {
        xAxis: [
          {
            type: "category",
            data: [],
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#fff", //左边线的颜色
                width: "2", //坐标线的宽度
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#fff", //左边线的颜色
                width: "2", //坐标线的宽度
              },
            },
          },
        ],
        series: [
          {
            data: [],
            type: "bar",
            barWidth: "30",
            itemStyle: {
              normal: {
                color: "#959fc5",
              },
            },
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        dataZoom: [
          {
            type: "slider",
            show: true,
            start: 0,
            end: 80,
            xAxisIndex: [0],
          },
        ],
      };

      myChart.setOption(option);
    });
  },

  methods: {
    clearSearchBtn() {
      this.customerInfo = {};
      this.bondInfo = "";
    },
    customerSubmit() {
      this.getCustomerFn(this.customerForm);
    },
    bondSubmit() {
      this.getBond(this.bondForm);
    },
    khFn() {
      this.status = 0;
      this.drawer = true;
      const param = {
        pn: 10,
        page: 1,
        customerNM: "",
        customerId: "",
      };
      this.getCustomerFn(param);
    },
    getCustomerFn(param) {
      getCustomer(param).then((res) => {
        this.customerData = res.data.result;
        this.customerTotal = Number(res.data.totalResults);
      });
    },
    customerPageFn(page) {
      const param = {
        pn: 10,
        page: page,
        customerNM: "",
        customerId: "",
      };
      this.getCustomerFn(param);
    },
    bottomPageFn(page) {
      if (this.riskAppetiteDate.length != 2) {
        this.$message({
          message: "请选择日期查询条件",
          type: "warning",
        });
      }
      if (this.customerInfo.customerID == "") {
        this.$message({
          message: "请选择客户信息",
          type: "warning",
        });
      }
      const param = {
        customerId: this.customerInfo.customerID,
        asseseOpenTime: this.riskAppetiteDate[0],
        asseseCloseTime: this.riskAppetiteDate[1],
        assessMethod: this.selectValue,
        page: page,
        pn: 10,
      };
      this.getMatchBond(param, page);
    },
    customerRowClick(row) {
      this.drawer = false;
      this.customerInfo = row;
    },
    bondRowClick(row) {
      this.drawer = false;
      this.bondInfo = row;
    },
    zjFn() {
      this.status = 1;
      this.drawer = true;
      const param = {
        bondName: "",
        bondId: "",
        pn: 10,
        page: 1,
      };
      this.getBond(param);
    },
    bondPageFn(page) {
      const param = {
        bondName: "",
        bondId: "",
        pn: 10,
        page: page,
      };
      this.getBond(param);
    },
    dateFn(row) {
      return row.asseseOpenTime + "~" + row.asseseCloseTime;
    },
    searchBtn() {},
    init() {
      getDictItems().then((res) => {
        this.filterData(res.data);
      });
    },
    filterData(arr) {
      arr.forEach((v) => {
        if (v.children && JSON.stringify(v.children) !== "[]") {
          this.filterData(v.children);
        }
        if (v.typeGroupCode == "Assess_method") {
          this.selectList.push(v);
        }
      });
    },
    tabFn(i) {
      this.allCearFn();
      this.tabIndex = i;
      if (this.tabIndex == 0) {
        this.getCustomerFn("");
      } else if (this.tabIndex == 1) {
        this.getBond("");
      }
    },

    getBond(param) {
      getBond(param).then((res) => {
        this.bondData = res.data.result;
        this.bondTotal = Number(res.data.totalResults);
      });
    },
    allCearFn() {
      this.customerInfo = {};
      this.bondInfo = {};
      this.searchList = [];
      this.searchInput = "";
    },
    async getMatchBond(param) {
      let res = await getMatchBondCustomer(param);
      this.tableData = res.data.result;
      this.bottomTotal = Number(res.data.totalResults);
      let dataList = [];
      let matchRateList = [];
      for (let i = 0; i < res.data.result.length; i++) {
        const element = res.data.result[i];
        dataList.push(element.asseseOpenTime + "~" + element.asseseCloseTime);
        // dataList.push(i)
        matchRateList.push(element.matchRate);
      }

      let chartDom = document.getElementById("charts");
      let myChart = echarts.init(chartDom);
      const option = {
        xAxis: [
          {
            type: "category",
            data: dataList,
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#fff", //左边线的颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#fff", //左边线的颜色
              },
            },
          },
        ],
        series: [
          {
            data: matchRateList,
            type: "bar",
            itemStyle: {
              normal: {
                color: "#959fc5",
              },
            },
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        dataZoom: [
          {
            type: "slider",
            show: true,
            start: 0,
            end: 80,
            xAxisIndex: [0],
          },
        ],
      };

      myChart.setOption(option);
    },
    riskBtn() {
      // if (this.riskAppetiteDate.length != 2) {
      //   this.$message({
      //     message: "请选择日期查询条件",
      //     type: "warning",
      //   });
      // }
      if (this.customerInfo.customerID == "") {
        this.$message({
          message: "请选择客户信息",
          type: "warning",
        });
      }
      const param = {
        customerId: this.customerInfo.customerID,
        asseseOpenTime: this.riskAppetiteDate[0],
        asseseCloseTime: this.riskAppetiteDate[1],
        assessMethod: this.selectValue,
        page: 1,
        pn: 10,
        bondId: this.bondInfo.bondId || "",
      };
      this.getMatchBond(param);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table ::v-deep th.el-table__cell {
  background-color: #1c2238 !important;
  color: #fff;
}

.box {
  display: flex;
  flex-direction: column;

  .topBar {
    min-height: 80px;
    background-color: #262d47;
    margin-bottom: 10px;
    padding: 20px 20px;
    padding-left: 40px;
    padding-bottom: 10px;
  }

  .topBox {
    display: flex;

    span {
      display: inline-block;
    }

    .searchBtn {
      margin-left: 20px;
    }

    .zj {
      margin-left: 20px;
    }

    .khTitle {
      height: 30px;
      line-height: 30px;
      vertical-align: top;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700px;
      margin-right: 10px;
    }

    .khInput,
    .zjInput {
      height: 30px;
      line-height: 30px;
      width: 200px;
      overflow: hidden;
      border: 1px solid rgba(126, 163, 255, 0.3);
      color: #ffffff;
      background-color: #363657;
      border-radius: 3px;
      cursor: pointer;
      text-align: center;
      line-height: 30px;
      padding: 0px 10px;
      font-size: 12px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .zjTitle {
      height: 30px;
      line-height: 30px;
      vertical-align: top;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700px;
      margin-right: 10px;
    }
  }

  .riskAppetiteTable {
    padding-top: 10px;
    padding-right: 10px;

    .el-input__inner {
      // height: 36px;
      // border-radius: 8px;
      // border: 1px dotted #718db1; // 1px solid #718db1;
      // color: #fff;
      // background-color: rgba($color: #fff, $alpha: 0);
      // input {
      //   background-color: rgba($color: #fff, $alpha: 0);
      //   color: #fff;
      // }
      // .el-range-separator,
      // .el-range__icon,
      // .el-range__close-icon {
      //   line-height: 29px;
      //   color: #718db1;
      // }
      background-color: #363657 !important;
      color: #fff;
      border: 1px solid rgba(126, 163, 255, 0.3);
    }
  }

  // .riskAppetiteSelect ::v-deep .el-range-editor.is-active{
  //   border-color: rgba(126, 163, 255, 0.3) !important;
  // }
  .riskAppetiteTable ::v-deep .el-range-input {
    background-color: #363657 !important;
    color: #fff;
  }

  .riskAppetiteSelect {
    margin: 0 5px;
  }

  .riskAppetiteSelect ::v-deep .el-input__inner {
    height: 31px !important;
    line-height: 31px !important;
  }

  .el-select-dropdown {
    padding: 10px 0px !important;
  }

  .left {
    width: 240px;
    background-color: #262d47;
    height: 100%;
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  ::v-deep .el-select-dropdown {
    width: 100px !important;
    overflow: hidden; //超出隐藏
    white-space: nowrap; //不折行
    text-overflow: ellipsis; //溢出显示省略号
    left: 0px !important;
  }

  .tab {
    display: flex;
    line-height: 40px;
    height: 40px;
    background: #354060;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    margin-bottom: 10px;

    div {
      flex: 1;
      cursor: pointer;
    }

    .tabActive {
      background-color: #1c2238 !important;
      color: #fff;
    }
  }

  .searchList {
    padding-top: 10px;
    overflow: scroll;

    .searchListItem {
      height: 35px;
      line-height: 35px;
      text-align: center;
      color: #959fc5;
      font-size: 12px;
    }

    .searchListItem:hover {
      background: #1f9bfd !important;
      color: #fff;
      cursor: pointer;
    }
  }

  .card {
    background-color: #fff;
  }

  .customersCard {
    background-color: #262d47;
    margin-bottom: 10px;
    color: #ffffff;

    .info {
      display: flex;
      padding: 15px 20px;

      .infoItem {
        flex: 1;
      }
    }

    .customersCardTitle {
      height: 40px;
      background: #354060;
      font-size: 14px;
      font-family: PingFang-SC-Bold, PingFang-SC;
      font-weight: bold;
      color: #ffffff;
      padding: 10px 16px;
    }

    .infoItemVal {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #d6dcff;
    }
  }

  .bondCard {
    background-color: #262d47;
    color: #ffffff;
    margin-bottom: 10px;

    .info {
      display: flex;
      padding: 20px 20px;

      .infoItem {
        flex: 1;
      }
    }

    .infoItemVal {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #d6dcff;
    }
  }

  .riskAppetite {
    display: flex;
    flex: 1;
    background-color: #262d47;
  }

  .riskAppetiteCharts,
  .riskAppetiteTable {
    flex: 1;
  }

  .riskAppetiteCharts {
    margin-right: 10px;
  }

  .infoItemLabel {
    margin-right: 30px;
    font-size: 14px;
  }

  .el-table ::v-deep th.el-table__cell {
    background-color: #1c2238 !important;
    color: #fff;
  }

  #charts {
    height: 100%;
    width: 100%;
  }

  .searchListItemAct {
    background: #1f9bfd !important;
    color: #fff !important;
  }

  .bondCardTitle {
    height: 40px;
    background: #354060;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    padding: 10px 16px;
  }
}
</style>
